<style lang="scss" scoped>
div {
  p {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    img {
      margin-right: 10px;
    }
  }
  .box {
    width: 100%;
    margin: 10px 0;
    p {
      height: 50px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }
  }
}
</style>

<template>
  <div>
    <van-nav-bar
      title="我的体征"
      left-text=""
      right-text="完成"
      left-arrow
      @click-left="router.back()"
      @click-right="router.push('/my')"
    />
    <p>
      <img src="../../images/icon/height.png" height="30" alt="" />
      <span>身高</span>
    </p>
    <div class="box">
      <p>
        <el-slider :max="250" :min="50" v-model="signsData.height" @change="formRef"></el-slider>
      </p>
      <p>
        <span>50cm</span>
        <span>250cm</span>
      </p>
    </div>

    <p>
      <img src="../../images/icon/weight.png" height="30" alt="" />
      <span>体重</span>
    </p>
    <div class="box">
      <p>
        <el-slider :max="150" :min="30" v-model="signsData.weight" @change="formRef"></el-slider>
      </p>
      <p>
        <span>30kg</span>
        <span>150kg</span>
      </p>
    </div>
    <p>
      <img src="../../images/icon/age.png" height="30" alt="" />
      <span>年龄</span>
    </p>
    <div class="box">
      <p>
        <el-slider :max="120" :min="18" v-model="signsData.age" @change="formRef"></el-slider>
      </p>
      <p>
        <span>18</span>
        <span>120</span>
      </p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 滑块数据
const signsData = ref({
  height: 0,
  weight: 0,
  age: 0
})

signsData.value = JSON.parse(localStorage.getItem('signsData') || '{}')

// 监听
const formRef = () => {
    localStorage.setItem('signsData', JSON.stringify(signsData.value))
}
</script>